<script setup>
import { ref, onMounted } from 'vue'
import HomePanel from './HomePanel.vue'
import { findNewAPI } from '@/apis/home.js'
// 定义数据
const newList = ref([])
// 定义请求数据
const getNewList = async () => {
  const res = await findNewAPI()
  newList.value = res.result
  //console.log('新鲜好物',res)
}
onMounted(() => getNewList())
</script>

<template>
  <HomePanel title="最新专题" sub-title="新鲜出炉 品质靠谱">
    <!--默认插槽 内容-->
    <div class="goods-list">
      <ul>
        <li v-for="item in newList" :key="item.id">
          <RouterLink class="box" to="/">
            <div class="pic" :aria-label="item.name">
              <img :src="item.picture" />
            </div>
            <div class="info-desc">
              <p class="title overflowtxt">{{item.name}}</p>
              <p class="price">
                <span class="unit">¥</span>
                <span class="num">{{item.price}}</span>
              </p>
            </div>
          </RouterLink>
        </li>
      </ul>
    </div>
  </HomePanel>
</template>

<style lang="scss" scoped>
.goods-list{
  width: 100%;
  ul{
    display: flex;
    margin-left: -10px;
    margin-right: -10px;
    li{
      width: 25%;
      padding: 0 10px;
      .box{
        display: block;
        border: 1px solid #ededed;
        .pic{
          width: 100%;
          height: 293px;
          display: flex;
          align-items: center;
          justify-content: center;
          img{
            max-width: 100%;
            max-height: 100%;
          }
        }
        .info-desc{
          padding: 10px 20px;
          .title{
            font-size: 16px;
            color: #666;
            height: 22px;
          }
          .price{
            font-size: 12px;
            color: $priceColor;
            margin-top: 10px;
            .num{
              font-size: 20px;
              margin-left: 2px;
            }
          }
        }
      }
    }
  }
}
</style>